<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<div>
				<el-input v-model="searchObj.dinabiaohao" class="zs-select-md zs-space-right-sm" disabled placeholder="项目" />
				<el-input v-model="searchObj.dinabiaohao" class="zs-select-md zs-space-right-sm" disabled placeholder="设备" />
				<el-input v-model="searchObj.dinabiaohao" class="zs-select-md zs-space-right-sm" disabled placeholder="日期" />
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': searchObj.type }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-input v-model="searchObj.dinabiaohao" class="zs-select-md zs-space-right-sm" disabled placeholder="电表号" />
						<el-select v-model="searchObj.type" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="类型" @change="queryList">
							<el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.id" />
						</el-select>
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
			</div>
			<div>
				<el-button class="zs-btn-plain" @click="exportFn">
					<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
				</el-button>
			</div>
		</div>
		
		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" :align="'center'" :index="(index) => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="standardName" label="日期" show-overflow-tooltip align="center" minWidth="120" :formatter="defaultTableData" />
				<el-table-column v-if="searchObj.type == 3" prop="standardName" label="异常点" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="standardName" label="合计" show-overflow-tooltip align="right" :formatter="defaultTableData" />
				<template v-if="searchObj.type == 1">
					<el-table-column v-for="item in 12" :key="item" :label="`${item}月`" show-overflow-tooltip align="right" :formatter="defaultTableData"> </el-table-column>
				</template>
				<template v-if="searchObj.type == 2">
					<el-table-column v-for="item in dayNum" :key="item" :label="`${item}日`" show-overflow-tooltip align="right" :formatter="defaultTableData"> </el-table-column>
				</template>
				<template v-if="searchObj.type == 3">
					<el-table-column v-for="item in 24" :key="item" :label="`${item - 1}:00`" show-overflow-tooltip align="right" :formatter="defaultTableData"> </el-table-column>
				</template>
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { defaultTableData, downloadNewFile } from '@/utils/publicUtils';
	import Energy from '@/api/Energy';
	import { useStore } from 'vuex';

	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	//查询条件
	let searchObj = reactive({ companyAreaManage: '', pageNo: 1, pageSize: curPageSize.value, type: 1 });

	//类型
	let typeList = reactive([
		{ id: 1, label: '按年' },
		{ id: 2, label: '按月' },
		{ id: 3, label: '按日' },
	]);

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	// 列表数据源
	const queryList = async () => {
		// tableData.loading = true;
		// let res = await Energy.energyElectricityListApi(searchObj);
		// if (res.data.code !== 200) return;
		// tableData.data = res.data.data.childList;
		// tableData.total = res.data.data.totalCount || 0;
		// tableData.loading = false;
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			searchObj.pageSize = size;
		} else {
			searchObj.pageNumber = size;
		}
		queryList();
	};

	// 导出
	const exportFn = async () => {
		const fileName = `公区能源明细表.xls`;
		let fileData = await Energy.energyElectricityExportApi(searchObj);
		downloadNewFile(fileData.data, fileName);
	};

	// 当前月份
	let dayNum = ref(getCurrentMonth());
	function getCurrentMonth() {
		const date = new Date();
		const year = date.getFullYear();
		const month = date.getMonth();
		const isLeapYear = year => {
			return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
		};
		let monthDay = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		return monthDay[month];
	}
</script>
